<template>
  <!-- 我的好友-城市服务商 -->
  <page-loading :show="showPage">
  <view class="container myfriend-page">
    <!-- 头部 -->
    <view class="header">
      <view class="status-bar"></view>
      <view class="heads flex flex-ai-c flex-jc-sb">
        <view class="backs mr-20" @click="backclick">
          <u-icon name="arrow-left" color="#333" size="34rpx"></u-icon>
        </view>
        <view class="seachs">
          <u-search placeholder="请输入姓名或联系方式" :animation="true" v-model="keyword" height="60" @search="onSearch" @clear="onClear" @focus="showPopup = false"></u-search>
        </view>
        <view class="addbtn" @click="onClickAddFriend">
          <i-icon icon="icon-tainjia" type="single" size="46rpx" color="#3D3D3D"></i-icon>
        </view>
      </view>
    </view>
    <view class="bodys">
      <view>
        <view class="notices flex flex-ai-c flex-jc-sb" @click="onClickDisabled">
          <view class="noticons">
            <i-icon icon="iconxunzhang-2" type="multiple" size="56rpx" class="iconpd"></i-icon>
          </view>
          <view class="nottext font-32 color-333">
            7迈车官网
          </view>
          <view class="nitionstxt">
          </view>
        </view>
        <view class="notices flex flex-ai-c flex-jc-sb" @click="onClickDisabled">
          <view class="noticons1">
            <i-icon icon="iconyaoqing-2" type="multiple" size="56rpx" class="iconpd"></i-icon>
          </view>
          <view class="nottext font-32 color-333">
            7迈车收益日报
          </view>
          <view class="nitionstxt">
          </view>
        </view>
        <view class="notices flex flex-ai-c flex-jc-sb" @click="onClickMemberList">
          <view class="noticons3">
            <i-icon icon="iconhuiyuan-2" type="multiple" size="56rpx" class="iconpd"></i-icon>
          </view>
          <view class="nottext font-32 color-333">
            企业成员
          </view>
          <view class="nitionstxt">
          </view>
        </view>
        <view class="notices flex flex-ai-c flex-jc-sb" @click="onJumpMass">
          <view class="noticons2">
            <i-icon icon="iconliaotian-2" type="multiple" size="56rpx" class="iconpd"></i-icon>
          </view>
          <view class="nottext font-32 color-333">
            群发助手
          </view>
          <view class="nitionstxt">
          </view>
        </view>
      </view>
      
      <!-- 群聊 -->
      <view>
        <view class="titles font-26 color-666 mb_15 flex flex-jc-sb">
          <view class="">
            群聊
          </view>
          <view class="" @click="onCheckAllGroup">
            查看全部
            <u-icon name="arrow-right" color="#9A9A9A" size="19rpx"></u-icon>
          </view>
        </view>
        <view v-if="groupInfo && groupInfo.length > 0" v-for="(item, index) in groupInfo" :key="index" class="notices flex flex-ai-c flex-jc-sb" @click="onJumpChatGroup(item)">
          <view class="noticons2">
            <image :src="item.group_face_url" mode="aspectFill"></image>
            <view class="iconred" v-if="item.im && item.im.unreadCount > 0"></view>
          </view>
          <view class="nottext font-32 color-333" style="width:520rpx;">
            {{item.group_name || item.im.groupProfile.name}}<br>
            <text class="font-24 color-999">{{item | formatMessage}}</text>
          </view>
          <view class="nitionstxt color-999" v-if="item.im">
            {{item.im.lastMessage.lastTime | formatDate}}
          </view>
        </view>
        <!-- <view v-if="groupInfo" class="notices flex flex-ai-c flex-jc-sb" @click="onJumpChatGroup(groupInfo)">
          <view class="noticons2">
            <image :src="groupInfo.group_face_url" mode="aspectFill"></image>
            <view class="iconred" v-if="groupInfo.im.unreadCount > 0"></view>
          </view>
          <view class="nottext font-32 color-333" style="width:520rpx;">
            {{groupInfo.group_name || groupInfo.im.groupProfile.name}}<br>
            <text class="font-24 color-999">{{groupInfo | formatMessage}}</text>
          </view>
          <view class="nitionstxt color-999" v-if="groupInfo.im">
            {{groupInfo.im.lastMessage.lastTime | formatDate}}
          </view>
        </view>
        
        <view v-if="groupInfoMe" class="notices flex flex-ai-c flex-jc-sb" @click="onJumpChatGroup(groupInfoMe)">
          <view class="noticons2">
            <image :src="groupInfoMe.group_face_url" mode="aspectFill"></image>
            <view class="iconred" v-if="groupInfoMe.im.unreadCount > 0"></view>
          </view>
          <view class="nottext font-32 color-333" style="width:520rpx;">
            {{groupInfoMe.im.groupProfile.name || groupInfoMe.group_name}}<br>
            <text class="font-24 color-999">{{groupInfoMe | formatMessage}}</text>
          </view>
          <view class="nitionstxt color-999" v-if="groupInfoMe.im">
            {{groupInfoMe.im.lastMessage.lastTime | formatDate}}
          </view>
        </view> -->
      </view>
      
      <!-- 好友列表 -->
      <view>
        <view class="titlesqb mb_15 flex flex-jc-sb">
          <view :class="item.check? 'allnum' : 'allnumhs'" v-for="(item,index) in selectfriend" :key="index" @click="allnumClick(item,index)">
            {{item.name}}（{{item.number}}）
          </view>
        </view>
        
        <view style="height: 50vh;" v-if="result.isEnd && result.data.length <= 0">
          <u-empty mode="search" ></u-empty>
        </view>
        <firend-tree :list="result.data" v-else />
        
      </view>

    </view>
    
    <!-- 添加好友弹窗 -->
    <u-popup mode="top" v-model="showPopup">
      <view class="popup-content">
        <view class="cell-box">
          <view class="cell" @click="onChangeAddFriend('mobile')">
            <i-icon icon="iconshouji2" size="40rpx" color="#3d3d3d"></i-icon>
            <text class="text">手机联系人</text>
          </view>
          <view class="cell" @click="onChangeAddFriend('weixin')">
            <i-icon icon="iconweixin1" size="42rpx" color="#3d3d3d"></i-icon>
            <text class="text">微信</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
  </page-loading>
</template>

<script src="./myFriendbuss.js"></script>
<style src="./myFriendbuss.scss" lang="scss" scoped></style>
